<%@page import="java.util.*"%>
<%@page import="java.text.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%
    String path = request.getContextPath(); 
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+path+ "/"; 
     
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>角色列表</title>
	<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="bootstrap-table/dist/bootstrap-table.css">
    
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font.css">
    
    <link rel="stylesheet" href="./css/x-admin.css" media="all">
    
    <style type="text/css">
 
  .addbr{
     float: right;
    margin-right: 80px;
  }
  .pad{
    padding-left:15px;
    padding-top:10px;
  }
  .im{
     padding:10px;
  }
  .padtr{
      margin-top:5px;
  }
  #filediv{
  border: 2px solid #ccc6c6;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    margin-right: 20px;
  }

.btn1{
    margin-top: 10px;
}
.arrow{
          width: 20px;
          height: 20px;
}

/*  #order>ul>li{
    padding-right: 12px;
    list-style: none;
    list-style-type: none;
    float: left;
}
#risk>ul>li{
    padding-right: 12px;
    list-style: none;
    list-style-type: none;
    float: left;
}  */
</style>
</head>
<body>
<div class="x-nav">
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
       <form class="layui-form x-center" action="" style="width:100%">
                <div class="layui-form-pane" style="margin-top: 15px;">
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 110px">添加时间</label>
                    <div class="layui-input-inline">
                      <input class="layui-input" placeholder="开始日期" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline">
                      <input class="layui-input" placeholder="截止日期" id="LAY_demorange_e">
                    </div>
                    
                    <label class="layui-form-label" style="width: 110px">角色名称</label>
                    <div class="layui-input-inline">
                      <input type="text" name="name"  id="name"  placeholder="请输入角色名称" autocomplete="off" class="layui-input">
                    </div>
                    
                    <div class="layui-input-inline" style="width:80px">
                        <button type="button" id="queryBtn" onclick="doQuery();" class="layui-btn"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                  </div>
                </div> 
            </form>
      <xblock>
       	 <button class="layui-btn" onclick="add()"><i class="layui-icon"></i>新增</button>
         <button class="layui-btn layui-btn-danger" onclick="exports()"><i class="layui-icon"></i>导出</button>
      </xblock>  
      </div>
	  <div class="container" style="width: 100%">
	        <table id="demo-table">
	        </table>
	  </div>
</body>
	<!-- 加载需要的js -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script src="js/jquery-bootstrap-pagination.js"></script>
    <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
	<script src="js/qunit-1.11.0.js"></script>
	<script src="js/bootstrap-datetimepicker.js"></script>
	<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="js/jquery.md5.js"></script>
	<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
	<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="lib/layui/layui.js" charset="utf-8"></script>
        <script src="js/x-layui.js" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">

	$(function () {
	    initTable();	
	});

	function doQuery(params){
	    $('#demo-table').bootstrapTable('refresh');    //刷新表格
	}

	function initTable(){
	    var url = "sysUser/getRoleList";
	    $('#demo-table').bootstrapTable({
	        method:'GET',
	        dataType:'json',
	        contentType: "application/x-www-form-urlencoded",
	        cache: false,
	        striped: true,                              //是否显示行间隔色
	        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	        url:url,
	        height: $(window).height() - 110,
	        width:$(window).width(),
	        showColumns:true,
	        pagination:true,
	        queryParams : queryParams,
	        minimumCountColumns:2, 
	        pageNumber:1,                       //初始化加载第一页，默认第一页
	        pageSize:15,                       //每页的记录行数（*）
	        pageList: [15, 25, 50, 100],        //可供选择的每页的行数（*）
	        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
	        exportDataType: 'all',
	        responseHandler: responseHandler,
	        columns: [
		        { field: '', title: '序列', checkbox:true },
		        {
		            field : 'gRoleName',
		            title : '角色名称',
		            align : 'center',
		            valign : 'middle'
		           
		        },
		        {
		            field : 'gAuthority',
		            title : '角色权限',
		            align : 'center',
		            valign : 'middle'
		           
		        },
		        {
	                field : 'gCreateTime',
	                title : '添加时间',
	                align : 'center',
	                valign : 'middle',
	            	 formatter : function (value, row, index){
	       	                return  timeStamp2String(value);
       	             }   
                },
		        {
		            field : 'upId',
		            title : '操作',
		            align : 'center',
		            valign : 'middle',
		            formatter: operateFormatter //自定义方法，添加操作按钮
		        }
		        
		        ]
		    });
	}
	
	function operateFormatter(value, row, index) {//赋予的参数
		console.log(row);
		return [
			'<button  class="layui-btn "   onclick="add( \''+ row.gId+ '\',\''+ row.gRoleName+ '\',\''+row.gAuthorityId+'\')"  ><i class="layui-icon">&#xe604;</i> 编辑</button>',
			'<button class="layui-btn "    onclick="deleteRole(\''+ row.gId + '\')"><i class="layui-icon"></i> 删除</button>',
			].join('');
	} 
	
     function exports(){
 		var startTime = $("#LAY_demorange_s").val();
 		var endTime = $("#LAY_demorange_e").val();
 		var name =  $("#name").val();
        window.location.href="sysUser/exportExcelRole?startTime="+startTime+"&endTime="+endTime+"&name="+name;      
 		
 	}
     
     function add(id,name,roles){
 		var title="";var str="";
 		if(name==undefined){
 			name="";
 		}
 		if(roles==undefined){
 			roles="";
 		}
 		if(id==undefined){
 			id="";
 			title="添加角色";
 		}else{
 			title="编辑权限";	
 		}
 		str+="<form class=\"form-horizontal\">"
 		+"<div class=\"form-group\" style=\"margin-top:10px\"><label  class=\"col-sm-2 control-label\">角色名称:</label>"
 		+"<div class='col-sm-3' style=\"margin-top:3px;width:250px\"><input type='text' id=\"name1\" class=\"form-control\" value='"+name+"'/>"
 		+"<input type='hidden' id=\"id\"  value='"+id+"'/></div></div>"
 		+"<div  style='margin-left: 22px;'><label class=\" control-label\" >权限分配:</label>"
 		+"<div style='margin-left: 20px;'><span>用户管理</span>&nbsp;&nbsp;<a  data-target=\"#user\" data-toggle=\"collapse\" ><img src='img/down26.png' class='arrow' /></a></div> "
 		+"<div id=\"user\" class=\"panel-collapse collapse in\" style='margin-left: 40px;'>"
 		+" <ul><li><input class=\"user\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)' value=\"11\">用户列表"
 		+"</li></ul></div>"
 		+"<div style='margin-left: 20px;'><span>广告管理</span>&nbsp;&nbsp;<a  data-target=\"#advest\" data-toggle=\"collapse\" ><img src='img/down26.png' class='arrow' /></a></div> "
 		+"<div id=\"advest\" class=\"panel-collapse collapse in pa\" style='margin-left: 40px;'>"
 		+"<ul>"
 		+"<li><input class=\"advest\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)' value=\"21\">启动页</li>"
 		+"<li><input class=\"advest\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)' value=\"22\">首页轮播图</li>"
 		+"<li><input class=\"advest\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)'  value=\"23\">广告图</li>"
 		+"</ul></div>"
 		+"<div style='margin-left: 20px;'><span>课程优惠管理</span>&nbsp;&nbsp;<a  data-target=\"#discount\" data-toggle=\"collapse\" ><img src='img/down26.png' class='arrow' /></a></div> "
 		+"<div id=\"discount\" class=\"panel-collapse collapse in pa\" style='margin-left: 40px;'>"
 		+"<ul><li> <input class=\"discount\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)'  value=\"31\">一般课程折扣设置</li>"
 		+"<li> <input class=\"discount\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)'  value=\"32\">知识体系折扣设置</li>"
 		+"<li> <input class=\"discount\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)'  value=\"33\">职业方向折扣设置</li>"
 		+"<li> <input class=\"discount\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)'  value=\"34\">打包课程折扣设置</li>"
 		+"<li> <input class=\"discount\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)'  value=\"35\">VIP优惠设置</li>"
 		+"</ul></div>"
 		+"<div style='margin-left: 20px;'><span>课程管理 </span>&nbsp;&nbsp;<a  data-target=\"#course\" data-toggle=\"collapse\" ><img src='img/down26.png' class='arrow' /></a></div> "
 		+"<div id=\"course\" class=\"panel-collapse collapse in pa\" style='margin-left: 40px;'>"
 		+"<ul>"
 		+"<li><input class=\"course\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)' value=\"41\">课程提问列表</li>"
 		+"<li><input class=\"course\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)' value=\"42\">课程列表</li>"
 		+"<li><input class=\"course\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)' value=\"43\">职业信息表</li>"
 		+"</ul></div>"
 		+"<div style='margin-left: 20px;'><span>内容管理 </span>&nbsp;&nbsp;<a  data-target=\"#fixed\" data-toggle=\"content\" ><img src='img/down26.png' class='arrow' /></a></div> "
 		+"<div id=\"content\" class=\"panel-collapse collapse in pa\" style='margin-left: 40px;'>"
 		+"<ul><li> <input class=\"content\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)'  value=\"51\">消息管理</li>"
 		+"<li><input class=\"content\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)' value=\"52\">提现审核</li>"
 		+"<li><input class=\"content\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)' value=\"53\">意见反馈</li>"
 		+"</ul></div>"
 		+"<div style='margin-left: 20px;'><span>视频管理 </span>&nbsp;&nbsp;<a  data-target=\"#borrow\" data-toggle=\"video\" ><img src='img/down26.png' class='arrow' /></a></div> "
 		+"<div id=\"video\" class=\"panel-collapse collapse in pa\" style='margin-left: 40px;'>"
 		+"<ul><li> <input class=\"video\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)'  value=\"61\">视频列表</li>"
 		+"</ul></div>"
 		+"<div style='margin-left: 20px;'><span>基础管理 </span>&nbsp;&nbsp;<a  data-target=\"#system\" data-toggle=\"collapse\" ><img src='img/down26.png' class='arrow' /></a></div> "
 		+"<div id=\"system\" class=\"panel-collapse collapse in pa\" style='margin-left: 40px;'>"
 		+"<ul><li> <input class=\"system\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)'  value=\"71\">权限列表</li>"
 		+"<li><input class=\"system\" type=\"checkbox\" name=\"check_name\" onclick='setting(this)' value=\"72\">账号列表</li>"
 		+"</ul></div>"
 		+"<div class=\"form-group\" style=\"padding-left: 20%\">"
 		+" <button  onclick=\"save()\" class=\"btn btn-info\"style=\"width: 150px\">保存</button><button type=\"reset\" style=\"width: 150px;margin-left:10px\" class=\"btn btn-info\">重置</button></div></form >";
 		
 		layer.open({
 			  type: 1,
 			  title: title,
 			  skin: 'layui-layer-rim', //加上边框
 			  area: ['640px', '800px'], //宽高
 			  content: str
 			});
 		setting();
 		if(id!=""){
 			 var radioAll  = $("input[name='check_name']");  
 	  	     var strs= new Array(); //定义一数组     
 	  	     strs=roles.split(","); //字符分割    
 	  	     for (var int = 0; int < strs.length; int++) {						   
 	  	           var authId =$.trim(strs[int]);	            
 	  	           	for(var a=0 ; a<radioAll.length ;a++){
   					    var radoiVal = radioAll.eq(a).val();  
 		    		    if(radoiVal == authId) {
 		    		        radioAll.get(a).checked = true;
 		    		    }
 	  				} 
 	  	     }
 		}
 	}
     
     //保存
 	function save(){
 		var id=$('#id').val();
 		var name=$('#name1').val();
 		if(name==null || name==''){
 			layer.msg('角色名称不能为空!',{icon:2,time:2000});
			  return ;
 		}
 	    var checkArray  =  $("input:checkbox[name='check_name']:checked");					  		  
         var str =new Array();
         var str1 =new Array();
         for (var i = 0; i < checkArray.length; i++) {
         	str.push(checkArray[i].value);		                        	 
 	    } 
         var roles = str.join(',');   
         var authName ="";
           for (var i = 0; i < checkArray.length; i++) {
         	  str1.push(checkArray[i].nextSibling.data);    	 
 		    } 
         var rName=str1.join(',');   
         var data={"gRoleName":name,"gAuthorityId":roles,"gId":id,"gAuthority":rName};
       		 $.ajax({
                    type: "post",
                    url: "sysUser/insertOrUpdateRole",
                    data: JSON.stringify(data),
                    contentType:"application/json;charset=UTF-8", 
                    dataType:"json",
                    success: function(data){    	            	 
 	                  if(data.code==200){
 	                	   layer.alert(data.msg, {icon: 6},function () {
 	       	           		parent.location.reload();
 	    	                    // 获得frame索引
 	    	                    var index = parent.layer.getFrameIndex(window.name);
 	    	                    //关闭当前frame
 	    	                    parent.layer.close(index);
 	    	                     parent.location.reload();
 	    	                });    	   
 	           	       }else{
 	           	    	    layer.msg(data.msg);
            	           }
                    }
                }); 
 		 
 	}
     
 	function setting(){
 		if($(this).is(':checked')){
 			$(this).prop("checked",true);
 		}else{
 			$(this).prop("checked",false);
 		}

 	}
    
 	//删除
 	function deleteRole(id) {
 		layer.confirm('确认要删除吗？',function(index){
             //发异步删除数据
 			$.ajax({
 	            url: "sysUser/deleteRole",
 	            type: "post",
 	            data: {
 	            	gId: id
 	            },
 	            success: function (data) {
 	            	if(data.code==200){
 				 		layer.msg('已删除!',{icon:3,time:3000});				 		
 				 		doQuery();
			 		}else{
			 			layer.msg(data.msg,{icon:3,time:3000});			
			 		}
 				} 
 	        });
         });       
 	 }
     
     /*编辑*/
     function admin_look(gId){
     	 x_admin_show("查看详情","sysUser/roleDetail?gId="+gId,"800"); 
     	 /*   window.location.href="course/couserDetails?classId="+classId+"&courseId="+courseId+"&id="+id;   */ 
     }
 
	function operateFormatterImg(value, row, index){			
		return [
				'<img   src='+row.pLogo+'   width="50px" height="50px"   data-toggle="modal" data-target="#resetPwd"  />',  				
			].join('');
	} 
		 
	function responseHandler(res) { 
		console.log(res);
	    if (res) {
	        return {
	            "rows" : res.data,
	            "total" : res.totalRecord
	        };
	    } else {
	        return {
	            "rows" : [],
	            "total" : 0
	        };
	    }
	}
	
	function queryParams(params) {
		var param = {    		
	    		startTime : $("#LAY_demorange_s").val(),
		    	endTime : $("#LAY_demorange_e").val(),
		    	name:$("#name").val(),
	        limit : this.limit, // 页面大小
	        offset : this.offset, // 页码
	    
	        pageNumber : this.pageNumber,
	        pageSize : this.pageSize
	    }
	  

	    return param;
	} 
	//初始化弹出框
	$(function () {
	  	$('[data-toggle="popover"]').popover()
	});
	
	 //时间格式化
   	function timeStamp2String(time){
   	    var datetime = new Date();
   	    datetime.setTime(time);
   	    var year = datetime.getFullYear();
   	    var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
   	    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
   	    var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
   	    var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
   	    var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
   	    return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second
   	}
	 
   	layui.use(['laydate','element','laypage','layer','form'], function(){
    	var form = layui.form(); //只有执行了这一步，部分表单元素才会修饰成功 
        $ = layui.jquery;//jquery
      laydate = layui.laydate;//日期插件
      layer = layui.layer;//弹出层
      form.render();

      //以上模块根据需要引入
      var start = {
        min: '2000-01-01 00:00:00'
        ,max: '2099-06-16 23:59:59'
        ,istoday: false
        ,choose: function(datas){
          end.min = datas; //开始日选好后，重置结束日的最小日期
          end.start = datas //将结束日的初始值设定为开始日
        }
      };
      
      var end = {
        min: '2000-01-01 00:00:00'
        ,max: '2099-06-16 23:59:59'
        ,istoday: false
        ,choose: function(datas){
          start.max = datas; //结束日选好后，重置开始日的最大日期
        }
      };
      
      document.getElementById('LAY_demorange_s').onclick = function(){
        start.elem = this;
        laydate(start);
      }
      document.getElementById('LAY_demorange_e').onclick = function(){
        end.elem = this
        laydate(end);
      }
      
    });
    </script>
</body>
</html>